'use client';
import { useRouter } from 'next/router';
import { useState, useEffect, useRef } from 'react';
import Image from 'next/image';
import { Loader } from 'lucide-react';
import styles from './index.module.scss';


const ImageSwitcher = () => {

    const router = useRouter();
    const [images, setImages] = useState([]);

    useEffect(() => {
        let imgArr = getImg(router.basePath || '');
        setImages(imgArr);
    }, [router.basePath]);


    const getImg = (base = '') => {
        return [
            `${base}/img/models/azure.png`,
            `${base}/img/models/openai.png`,
            `${base}/img/models/tongyi.png`,
            `${base}/img/models/deepseek.png`,
            `${base}/img/models/anthropic.png`,
            `${base}/img/models/default.png`,
        ];
    };

    return (
        <div className={styles.container}>
            <div className={styles.imageBox} onClick={() => {
                console.log('点击')
            }}>
                <div>
                    <Image
                        src={images[0]}
                        width={60}
                        height={60}
                        className={styles.image}
                    />
                </div>
            </div>
            <div className={styles.text}>
                <span className={styles.IconLoading} >
                    <Loader className="animate-spin" size={14} />
                </span>
                <div className={styles.textBox} >
                    现在我将创建第二张幻灯片，介绍培训内容和大纲：我将基于这本书的主要结构和内容，制定出培训计划...
                </div>
                <span className={styles.pageSize}>1/12</span>
            </div>
        </div>
    );
};

export default ImageSwitcher;
